<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>VRS</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="../js/javascript.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/localstorage.js"></script>
    <script type="text/javascript" src="../js/qrcode.js"></script>
    <link rel="stylesheet" href="../css/Stylesheet.css" />
    <style>
    .tdS {
        background: #def0d8;
    }

    .tdI {
        background: #f2dedf;
    }

    th {
        text-align: center;
    }

    .table {
        box-shadow: 0 0;
    }

    img {
        cursor: pointer;
    }

    #bg {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.7;
        opacity: .70;
        filter: alpha(opacity=70);
    }

    div.list_paging_top,
    div.list_paging_bottom,
    div.ExportLinks a {
        height: auto;
    }

    #show {
        display: none;
        position: absolute;
        top: 25%;
        left: 42%;
        width: 280px;
        height: 280px;
        padding: 8px;
        border: 8px solid #E8E9F7;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }

    .button,
    tr td button {
        padding: 2px 10px;
        margin: 0px 10px;
        background: #009bce;
        border-radius: 4px;
        border: 1px;
        color: #fff;
    }

    .status,.status1{
        position: fixed;
        bottom: 10px;left: 20px;border-radius: 5px;
        background:#f7b900;
        padding: 5px;
    }
    .status button,.status1 button{
        margin-right: 15px;
        float: right;
        margin-top: 10px;
        background: #00b5f1;
        border: 0;
        border-radius: 4px;
    }
    </style>
    <script type="text/javascript">
        $(function(){

        })
    </script>
</head>

<body>


        <div class="status">
            <div id="sbox">访客xxx预约10-08-2017来访2H,是否同意</div>     
            <script>
            	var fk = language.fangke_yufang;
            	var yy = language.bespeak;
            	var sc = language.Visiting_time;
            	var Agreest = language.Agreest;
            	var time = new Date();
            	var y = time.getFullYear();    //获取完整的年份(4位,1970-????)
				var m = (time.getMonth())+1;       //获取当前月份(0-11,0代表1月)
				var d = (time.getDate())+1;  
				var today = d+'-'+m+'-'+y;         
            	console.log(today);
            	var allText = fk + " Mr. Li " + yy + "  " + today + ", " + sc + "2H," +Agreest;
            	$("#sbox").html(allText);
            
            	
            </script>
            <div>
                <button id="y"><script type="text/javascript">document.write(language.Yes)</script></button>
                <button id="n"><script type="text/javascript">document.write(language.No)</script></button>
            </div>
        </div>
        
        <div class="status1" style="width: 18%;display: none;">
            <div id="fbox">处理信息已发送</div>     
            <div>             
                <button id="confirm"><script type="text/javascript">document.write(language.confirm)</script></button>
            </div>
        </div>
            <script>
            	$("#y").click(function(){
            		$.ajax({
            			type:"get",
            			url:"http://221.204.11.69:3006//api/v1/send_sms?phone=13923789809&type=3&person_type=1 ",
            			async:true,
            			success:function(data){
            				console.log(data);
            				alert("处理信息已发送");
		            		$(".status").fadeOut(1500);
		            		setTimeout(function(){ 
		            			var fboxy = language.fboxy;
		            			$("#fbox").html(fboxy);
		            			$(".status1").fadeIn(1500);
		            		},1500);
            			}
            		});
            		
            		
            	})
            	$("#n").click(function(){
            		alert("处理信息已发送");
            		$(".status").fadeOut(1500);
            		setTimeout(function(){ 
            			var fboxn = language.fboxn;
            			$("#fbox").html(fboxn);
            			$(".status1").fadeIn(1500);
            		},1500);
            	})
            	$("#confirm").click(function(){       
            		$(".status1").fadeOut(1500);
            	})
            	
            </script>


    <div class="dropdown" style="position: absolute;right: 30px;top:10px;z-index: 100;color: #fff;">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" style="background: #03a9f4 ; color: #fff;">
            <script>
            document.write(language.Language_switching)
            </script><span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','zh_cn');location.reload()">简体中文</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','zh_tw');location.reload()">繁体中文</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','en');location.reload()">English</a>
            </li>
        </ul>
    </div>
    <div id="headercontainer">
        <img src="../img/TourTrax-Logo.png" alt="TourTrax logo" class="mobilizelogo">
        <!-- <div class="mobilizelogo" style="color: #0fb5f1;font-size: 2.5em;margin: 0px;margin-left: 10px;line-height: 85px;"> -->
        <!-- <script>document.write(language.zizhu_yufang)</script> -->
        <!-- </div> -->
        <!-- <img class="customerLogo" src="" alt="BCS TourTrax 2.0 (Demo)" title="BCS TourTrax 2.0 (Demo)"> -->
        <div class="logindetails">
            <p>
                <script>
                document.write(language.Welcome)
                </script>
                <a href="#">
                    <script>
                    document.write(language.account)
                    </script>
                </a> or
                <a href="#" onclick="location.href='../login.html'">
                    <script>
                    document.write(language.login_out)
                    </script>
                </a>
            </p>
            <p>
                <a href="#"><img src="img/helpicon.png" alt="help icon"></a>
                <a href="#">
                    <script>
                    document.write(language.help)
                    </script>
                </a>
            </p>
        </div>
        <!--End logindetails-->
    </div>
    <div id="bg" onclick="hidediv()"></div>
    <img id="show" src="" alt="" />

    
    <!-- <div class="pageheader">
			<div class="clear"></div>
			<h1>访客自助预约</h1>
		</div> -->
    
    
    
    
    
    
    <!-- <div class="pageheader">
            <div class="clear"></div>
            <h1>访客自助预约</h1>
        </div> -->
    <div class="listFilter" style="margin: 20px;">
        <h2><script>document.write(language.Guest_landing)</script><span class="tooltip" style="display: none;"><em>(筛选下表)</em></span></h2>
        <div class="divider"></div>
        <table style="width: 100%;">
            <tbody>
                <tr>
                    <td class="FormLabel">
                        <script>
                        document.write(language.Date_Filters)
                        </script>
                    </td>
                    <td>
                        <input type="date" id="">&nbsp;&nbsp;
                        <script>
                        document.write(language.to)
                        </script>&nbsp;&nbsp;
                        <input type="date" id="">&nbsp;&nbsp;&nbsp;&nbsp;
                        <button>
                            <script>
                            document.write(language.Filter)
                            </script>
                        </button>
                    </td>
                    <td>
                        <div class="button" data-toggle="modal" data-target="#Modal" onclick="cl()" style="min-width: 100px;text-align: center;float: right;cursor: pointer;">
                            <script>
                            document.write(language.invite)
                            </script>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="list_table" id="ltReport_list">
            <table class="list_table" id="ltReport_list" width="100%" cellspacing="0" style="text-align: center;">
                <thead>
                    <tr>
                        <th>
                            <script>
                            document.write(language.Visitor_name)
                            </script>
                        </th>
                        <th>
                            <script>
                            document.write(language.Visitor_tel)
                            </script>
                        </th>
                        <th>
                            <script>
                            document.write(language.Visiting_date)
                            </script>
                        </th>
                        <th>
                            <script>
                            document.write(language.Visitor_time)
                            </script>
                        </th>
                        <th>
                            <script>
                            document.write(language.id_number)
                            </script>
                        </th>
                        <!-- <th>
                            <script>
                            document.write(language.Interviewee_name)
                            </script>
                        </th> -->
                        <!-- <th>
                            <script>
                            document.write(language.Interviewee_tel)
                            </script>
                        </th> -->
                        <th>
                            <script>
                            document.write(language.Visiting_time)
                            </script>
                        </th>
                        <th>
                            <script>
                            document.write(language.QR_code)
                            </script>
                        </th>
                        <th>
                            <script>document.write(language.operation)</script>
                        </th>
                    </tr>
                </thead>
                <tbody id="tbody">
                    <tr class="odd_row">
                        <td>Chan Da Min</td>
                        <td>6038-7328</td>
                        <td>10-08-2017</td>
                        <td>08:00</td>
                        <td>A808682145</td>
                        <!-- <td>Mary Lee</td> -->
                        <!-- <td>2846-5543</td> -->
                        <td>2H</td>
                        <td><img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
                        <td>
                            <button><script>document.write(language.Yes)</script></button>
                            <button><script>document.write(language.No)</script></button>
                        </td>
                    </tr>
                    <tr class="even_row">
                        <td>Xiao Min</td>
                        <td>6038-7327</td>
                        <td>10-08-2017</td>
                        <td>09:00</td>
                        <td>A808682144</td>
                        <!-- <td>Mary Lee</td> -->
                        <!-- <td>2846-5543</td> -->
                        <td>2H</td>
                        <td><img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
                        <td>
                            <button><script>document.write(language.Yes)</script></button>
                            <button><script>document.write(language.No)</script></button>
                        </td>
                    </tr>
                    <tr class="odd_row">
                        <td>Zhang San</td>
                        <td>6038-7326</td>
                        <td>10-08-2017</td>
                        <td>10:00</td>
                        <td>A808682143</td>
                        <!-- <td>Mary Lee</td> -->
                        <!-- <td>2846-5543</td> -->
                        <td>2H</td>
                        <td><img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
                        <td>
                            <button><script>document.write(language.Yes)</script></button>
                            <button><script>document.write(language.No)</script></button>
                        </td>
                    </tr>
                    <tr class="even_row">
                        <td>Li Feng</td>
                        <td>6038-7325</td>
                        <td>10-08-2017</td>
                        <td>11:00</td>
                        <td>A808682142</td>
                        <!-- <td>Mary Lee</td> -->
                        <!-- <td>2846-5543</td> -->
                        <td>2H</td>
                        <td><img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
                        <td>
                            <button><script>document.write(language.Yes)</script></button>
                            <button><script>document.write(language.No)</script></button>
                        </td>
                    </tr>
                    <tr class="odd_row">
                        <td>Wang Kai</td>
                        <td>6038-7324</td>
                        <td>10-08-2017</td>
                        <td>12:00</td>
                        <td>A808682141</td>
                        <!-- <td>Mary Lee</td> -->
                        <!-- <td>2846-5543</td> -->
                        <td>2H</td>
                        <td><img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
                        <td>
                            <button><script>document.write(language.Yes)</script></button>
                            <button><script>document.write(language.No)</script></button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="ExportLinks">
                <a href="#">
                    <script>
                    document.write(language.Export_all_to)
                    </script> Excel</a>
                <a href="#">
                    <script>
                    document.write(language.Export_this_page_to)
                    </script> Excel</a>
                <a href="#">
                    <script>
                    document.write(language.Export_this_page_to)
                    </script> PDF</a>
                <a href="#">
                    <script>
                    document.write(language.Export_all_to)
                    </script> PDF</a>
                <a href="#"><script>document.write(language.send)</script> <script>document.write(language.email)</script></a>
            </div>
            <div class="WhereToLinks"></div>
        </div>
        <div style="display: none;">
            <p>内容：
                <input type="text" id="content" value="http://weibo.com/fdipzone" />
            </p>
            <p>尺寸：
                <input type="text" id="size" value="150">
            </p>
            <p>
                <button id="send">生成二维码</button>
            </p>
            <p><a id="xia" href="" download="qrcode">下载二维码</a></p>
            <div id="qrcode"></div>
        </div>
        <div class="clear"></div>
    </div>
    
    
    
    <div class="dropdown" style="position: absolute;right: 30px;top:10px;z-index: 100;color: #fff;">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" style="background: #03a9f4 ; color: #fff;">
            <script>
            document.write(language.Language_switching)
            </script><span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','zh_cn');location.reload()">简体中文</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','zh_tw');location.reload()">繁体中文</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','en');location.reload()">English</a>
            </li>
        </ul>
    </div>
    <div id="bg" onclick="hidediv()"></div>
    <img id="show" src="" alt="" />
    <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="ModalLabel"><script>document.write(language.zizhu)</script></h4>
                </div>
                <form action="">
                    <div class="modal-body">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td>
                                        <script>
                                        document.write(language.name)
                                        </script>
                                    </td>
                                    <td>
                                        <input id="name" name="name" class="form-control" type="text" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <script>
                                        document.write(language.telphone)
                                        </script>
                                    </td>
                                    <td>
                                        <input id="tel" name="tel" class="form-control" type="text" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <script>
                                        document.write(language.Visitor_time)
                                        </script>
                                    </td>
                                    <td>
                                        <input id="tim" name="tim" class="form-control" type="date" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <script>
                                        document.write(language.id_number)
                                        </script>
                                    </td>
                                    <td>
                                        <input id="code" name="code" class="form-control" type="text" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <script>
                                        document.write(language.Interviewee_name)
                                        </script>
                                    </td>
                                    <td>
                                        <input id="sname" name="sname" class="form-control" type="text" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <script>
                                        document.write(language.Interviewee_tel)
                                        </script>
                                    </td>
                                    <td>
                                        <input id="stel" name="stel" class="form-control" type="text" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <script>
                                        document.write(language.Visiting_time)
                                        </script>
                                    </td>
                                    <td>
                                        <input id="hour" name="hour" class="form-control" type="text" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <script>
                        document.write(language.close)
                        </script>
                    </button>
                    <button type="button" class="btn btn-primary" onclick="sub()">
                        <script>
                        document.write(language.Submit)
                        </script>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    
    
</body>
<script type="text/javascript">
function qrimg(o) {
    var src = $(o).attr('src');
    $('#bg').show();
    $('#show').attr('src', src).show();
}
$("#tbody button").click(function(){
	alert("处理信息已发送！")
})
function hidediv() {
    $('#bg').hide();
    $('#show').hide();
}

function cl() {
    $("#name").val("");
    $("#tel").val("");
    $("#tim").val("");
    $("#code").val("");
    $("#sname").val("");
    $("#stel").val("");
    $("#hour").val("");
}

function sub() {
    var d = {};
    var t = $('form').serializeArray();
    $.each(t, function() {
        d[this.name] = this.value;
    });
    var formJson = JSON.stringify(d);
    crCode(formJson)

}

// 二维码对象
var qrcode;

// 默认设置
var content;
var size;

// 设置点击事件
function crCode(data) {
    var name = $("#name").val();
    var tel = $("#tel").val();
    var tim = $("#tim").val();
    var code = $("#code").val();
    var sname = $("#sname").val();
    var stel = $("#stel").val();
    var hour = $("#hour").val();
    if (name == "" || tel == "" || tim == "" || code == "" || sname == "" || stel == "" || hour == "") {
        alert("信息填写不完整,请继续填写！")
        return false;
    }

    // 获取内容
    content = data;
    content = content.replace(/(^\s*)|(\s*$)/g, "");

    // 获取尺寸
    size = document.getElementById("size").value;

    // 检查内容
    if (content == '') {
        alert('请输入内容！');
        return false;
    }

    // 检查尺寸
    if (!/^[0-9]*[1-9][0-9]*$/.test(size)) {
        alert('请输入正整数');
        return false;
    }



    // 清除上一次的二维码

    if (qrcode) {
        document.getElementById("qrcode").innerHTML = "";
        qrcode.clear();
    }

    // 创建二维码
    qrcode = new QRCode(document.getElementById("qrcode"), {
        width: size, //设置宽高
        height: size
    });

    qrcode.makeCode(content);

    setTimeout(function() {
        var src = $("#qrcode img").attr("src")
        $("#tbody").append('<tr class="even_row"><td>' + name + '</td><td>' + tel + '</td><td>' + tim + '</td><td>' + code + '</td><td>' + hour + '</td><td><img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="' + src + '"></td><td><button>'+language.Yes+'</button><button>'+language.No+'</button></td></tr>')
        $('#Modal').modal('hide');
        console.log(src);
    }, 500)
}
</script>

</html>